<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>首页</title>
	<style>
		*,
		*::after,
		*::before {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		:root {
			min-height: 100vh;
		}

		:root:focus-within {
			scroll-behavior: smooth;
		}

		body {
			min-height: inherit;
		}

		/* 应用于滚动容器 */
		.scroll-container {
			display: flex;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			/* 横向滚动，严格对齐 */
			scroll-padding: 10px;
			/* 防止滚动时内容紧贴边缘 */
		}

		/* 应用于滚动容器内的每个子元素 */
		.scroll-item {
			scroll-snap-align: start;
			/* 滚动对齐到起始边缘 */
			scroll-snap-stop: always;
			/* 始终对齐，即使滚动过程中继续滚动 */
			flex-shrink: 0;
			/* 防止子元素缩小 */
			/* 设置宽度、高度、其他样式 */
		}
	</style>
</head>

<body>
	<div></div>
	<view class="scroll-container">
		<view class="scroll-item">...</view>
		<view class="scroll-item">...</view>
		<view class="scroll-item">...</view>
		<!-- 更多滚动项 -->
	</view>
</body>
<script>
	"use strict"; {
	};
</script>

</html>
<!--

	<template>
	<view class="page testPage">
		<view class="wrapper">
			<view class="roller" @touchend="touchend">
				<view @transitionend="transitionend" class="item" v-for="(v,k) of list" :key="k">{{v}}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	let list = ["小米", "华为", "苹果", "oppo", "vivo", "荣耀", "三星", "诺基亚", "索尼"]

	function touchend(e : any) {
		console.log(e)
	}

	function transitionend(e : any) {
		console.log("transitionend ==", e)
	}
</script>

<style lang="scss" scoped>
	.testPage {
		@include flexCenterCenter;
	}

	.wrapper {
		width: 500rpx;
		height: 500rpx;
		position: relative;
		background-image: linear-gradient(to bottom,
				rgba(0, 0, 0, .3) 0%,
				rgba(0, 0, 0, 0) 25%,
				rgba(0, 0, 0, 0) 75%,
				rgba(0, 0, 0, .3) 100%);
		box-shadow: inset 0 0 8rpx;
		border-radius: 12rpx;

		&::after {
			content: "";
			position: absolute;
			top: 200rpx;
			width: 100%;
			height: 100rpx;
			background-image: linear-gradient(to bottom,
					rgba(0, 0, 0, .1) 0%,
					rgba(0, 0, 0, .2) 50%,
					rgba(0, 0, 0, .25) 50%,
					rgba(0, 0, 0, .1) 100%);
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, .12);
			border-top: 1rpx solid rgba(0, 0, 0, .12);
			border-bottom: 1rpx solid rgba(0, 0, 0, .12);
			pointer-events: none;
		}
	}

	.roller {
		width: 100%;
		height: 100%;
		font-size: 40rpx;
		overflow-y: auto;
		font-family: Helvetica, Arial, sans-serif;
		scroll-snap-type: y mandatory;
		// scroll-padding: 10rpx;
		/* 防止滚动时内容紧贴边缘 */

		&::-webkit-scrollbar {
			display: none;
		}

		// 去掉两个view。 这种方法有点小瑕疵了
		&::before {
			width: 100%;
			content: "";
			height: 200rpx;
			display: inline-block;
			background-color: palegoldenrod;
		}

		&::after {
			width: 100%;
			content: "";
			height: 200rpx;
			display: inline-block;
			background-color: palegoldenrod;
		}
	}

	.roller .item {
		width: 100%;
		height: 100rpx;
		@include flexCenterCenter;
		padding: 0 20rpx;
		position: relative;
		font-weight: bold;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
</style>

 -->